<template>
  <div class="bf-icon" :style="getStyle()">
    <i
      :class="[...props.prefixClass!, iconName]"
      v-if="props.iconName"
      :style="{
        fontSize: props.size
      }"
    />
    <slot v-else />
  </div>
</template>

<script setup lang="ts">
  interface IBFIconProps {
    iconName?: string
    prefixClass?: string[]
    size?: number | string
    color?: string
    bg?: string
    radius?: string
    padding?: string
  }
  const props = withDefaults(defineProps<IBFIconProps>(), {
    prefixClass: () => ['iconfont'],
    size: '1.3rem',
    bg: '',
    radius: '',
    padding: '10px',
    color: ''
  })
  console.log()

  const getStyle = () => {
    const paddingArr = props.padding.split(' ')
    const size = Number.isNaN(Number(props.size)) ? props.size : props.size + 'px'
    const style = {
      width: size,
      height: size,
      padding: props.padding,
      backgroundColor: props.bg,
      borderRadius: props.radius,
      color: props.color
    }
    let heightPadding, widthPadding
    switch (paddingArr.length) {
      case 1:
        style.width = `calc(${size} + ${props.padding})`
        style.height = `calc(${size} + ${props.padding})`
        break
      case 2:
        style.width = `calc(${size} + ${paddingArr[1]})`
        style.height = `calc(${size} + ${paddingArr[0]})`
        break
      case 3:
        heightPadding = (parseInt(paddingArr[0]) + parseInt(paddingArr[2]) / 2).toFixed(0) + 'px'
        style.width = `calc(${size} + ${paddingArr[1]})`
        style.height = `calc(${size} + ${heightPadding})`
        break
      case 4:
        widthPadding = (parseInt(paddingArr[1]) + parseInt(paddingArr[3]) / 2).toFixed(0) + 'px'
        heightPadding = (parseInt(paddingArr[0]) + parseInt(paddingArr[2]) / 2).toFixed(0) + 'px'
        style.width = `calc(${size} + ${widthPadding})`
        style.height = `calc(${size} + ${heightPadding})`
        break
      default:
        console.warn('padding is not sure value')
        style.width = `calc(${size} + 15px)`
        style.height = `calc(${size} + 15px)`
        break
    }
    return style
  }
</script>

<style scoped lang="scss">
  .bf-icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
